<template>
  <div class="chaseDialog" v-if="showDialog">
    <el-dialog :close-on-click-modal="false" title="追分申请" :visible.sync="showDialog" width="500px">
      <div class="chaseDialog-main">
        <div class="chase-info-item">
          <p class="title">订单ID：</p>
          <p class="info">{{info.id}}</p>
        </div>
        <div class="chase-info-item">
          <p class="title">充值金额：</p>
          <p class="info">{{info.amount}}</p>
        </div>
        <div class="chase-info-item">
          <p class="title">当前余额：</p>
          <p class="info">{{balance}}</p>
        </div>
        <div class="chase-info-item">
          <p class="title">追分金额：</p>
          <p class="info">{{info.amount}}</p>
        </div>
        <div class="chase-info-item">
          <p style="margin-right: 22px;" class="title">备注：</p>
          <el-input class="info" v-model="reason" type="textarea" placeholder="请输入备注信息"></el-input>
        </div>

        <div class="btns">
          <el-button @click="close" type>取消</el-button>
          <el-button @click="submit" type="primary">确定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { chaseAgencyRecharge,getAgencyDetail } from "@/api";

export default {
  data() {
    return {
      showDialog: false,
      reason: "",
      info: null,
      balance:0

    };
  },
  created() {
    //   if (this.id) {
    //     this.getDetail()
    //   }
  },
  methods: {
    close() {
      this.showDialog = false;
      this.reason = '';
    },
    open(info) {
      this.info = info;
      this.showDialog = true;
      getAgencyDetail(info.agency_id).then(res=>{
        if(res.status == 0){
           this.balance = Number(res.data.balance) / 100
        }
      })
    },
    submit() {
      chaseAgencyRecharge(this.info.id, {
        reason: this.reason
      }).then(res => {
        if (res.status === 0) {
          this.$message({ message:  `追分成功，已追分${this.info.amount}元。`, type: "success" });
          this.close();
          this.$emit("success");
        } else {
          this.$message({ message: "追分失败。", type: "error" });
          this.close();
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.chaseDialog {
  .chaseDialog-main {
    padding: 0 30px;
  }
  .chase-info-item {
    display: flex;
    flex-wrap: nowrap;
  }
  .title {
    width: 90px;
    color: #222;
    vertical-align: top;
  }
  .btns {
    display: flex;
    justify-content: flex-end;
    margin-top: 30px;
  }
}
</style>

